<template>
    <a-form
        ref="stationRef"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        :model="stationInfo"
      >
        <a-row :gutter="24" style="margin-left: 0px;margin-right: 0px;">
            <a-col :span="12">
                <a-form-item  label="岗位名称" name="name" 
                 :rules="[{ required: true, message: '请输入岗位名称!' }]">
                    <a-input v-model:value="stationInfo.name"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="岗位编码" name="code" 
                :rules="[{ required: true, message: '请输入岗位编码!' }]">
                    <a-input v-model:value="stationInfo.code"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="所属组织" name="orgId"  
                :rules="[{ required: true, message: '所属组织!' }]">
                    <a-tree-select
                        :value="stationInfo.orgId"
                        style="width: 100%"
                        :tree-data="orgDataTree"
                        @change="handleOrgIdChange"
                        allow-clear
                        placeholder="请选择"
                        tree-node-filter-prop="label"
                    />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="岗位领导" name="leader	">
                    <div style="border: 1px solid #e6e8eb;display: flex;justify-content: space-between;align-items: center;">
                        <a-space>
                            <div style="overflow: auto;" class="tagboxs">
                                <a-tag closable @close="handleClose()" v-for="tag in leaderTags" :key="tag">
                                    {{ tag.NAME }}
                                </a-tag>
                            </div>
                        </a-space>
                        <n-button style="margin-left: auto;" size="small" secondary type="info" @click="openMenuModal">
                            <template #icon>
                                <n-icon><svg-icon name="touxiang" size="18" /></n-icon>
                            </template>请选择
                        </n-button>
                    </div>
                <a-input v-model:value="stationInfo.leader" hidden></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="公共岗" name="pubPostId">
                    <div style="border: 1px solid #e6e8eb;display: flex;justify-content: space-between;align-items: center;">
                        <a-space>
                            <div style="overflow: auto;" class="tagboxs">
                                <a-tag closable @close="handlePostsClose()" v-for="tag in pubStationTags" :key="tag">
                                    {{ tag.NAME }}
                                </a-tag>
                            </div>
                        </a-space>
                        <n-button style="margin-left: auto;" size="small" secondary type="info" @click="openPubStationModal">
                            <template #icon>
                                 <n-icon><svg-icon name="touxiang" size="18" /></n-icon>
                            </template>请选择
                        </n-button>
                    </div>
                    <a-input v-model:value="stationInfo.pubPostId" hidden></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="岗位类别" name="postType">
                    <a-input v-model:value="stationInfo.postType"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="24" >
                <a-form-item :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"  label="岗位职责" name="responsibility">
                    <a-textarea v-model:value="stationInfo.responsibility"></a-textarea>
                </a-form-item>
            </a-col>
            <a-col :span="24">
                <a-form-item  :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"  label="岗位文档" name="document">
                <a-textarea v-model:value="stationInfo.document"></a-textarea>
                </a-form-item>
            </a-col>
            <a-col>
                <a-form-item  :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"  label="岗位任职资格" name="qualification">
                <a-textarea v-model:value="stationInfo.qualification"></a-textarea>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="是否启用" name="IS_ENABLED">
                    <a-radio-group v-model:value="stationInfo.IS_ENABLED">
                        <a-radio :value=0>不启用</a-radio>
                        <a-radio :value=1>启用</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item  label="是否与业务相关" name="IS_BUSINESS">
                    <a-radio-group v-model:value="stationInfo.IS_BUSINESS">
                        <a-radio :value=0>否</a-radio>
                        <a-radio :value=1>是</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-col>
            <a-col :span="24" >
                <a-form-item  :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"  label="排序号" name="postSort">
                    <a-input-number v-model:value="stationInfo.postSort"></a-input-number>
                </a-form-item>
            </a-col>
            <a-col :span="24" >
                <a-form-item  :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"  label="备注" name="remark">
                    <a-textarea v-model:value="stationInfo.remark"></a-textarea>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
    
</template>
<script lang="tsx" setup>
    import { reactive, ref,unref, defineComponent } from 'vue';
    import type { FormInstance } from 'ant-design-vue';
    import { TreeSelect } from 'ant-design-vue';
    import userSingle from '@/components/system/orgUserSingle/userSingle.vue';
    import { useModal } from '@/hooks/useModal/useModal';
    import pubStationModel from '@/components/system/orgStationModel/pubStation.vue';
    import {
        getDeptPosts
    } from '@/api/organization/station/station';

    const SHOW_PARENT = TreeSelect.SHOW_PARENT;
    defineComponent({
        userSingle,
        pubStationModel
    })
    interface PostItem{
      defaultData?:any;
    };
    //公共岗
    const pubStationTags=ref<any>([]);
    //公共岗
    const pubPostRef = ref<FormInstance>();
    const props = withDefaults(defineProps<PostItem>(),{
        defaultData:{
            orgData:[],
            postItem:{
                /**
                * 岗位id
                */
                id: '',
                /**
                * 岗位名称
                */
                name: '',
                /**
                * 岗位编号
                */
                code: '',
                /**
                * 所属组织
                */
                orgId: [],
                /**
                * 岗位领导
                */
                leader: '',
                leaderName: '',
                /**
                * 公共岗
                */
                pubPostId: '',
                pubPostIdName:'',
                /**
                * 岗位职责
                */
                responsibility: '',
                /**
                * 岗位文档
                */
                document: '',
                /**
                * 任职资格
                */
                qualification: '',
                /**
                * 岗位类型
                */
                postType: '',
                /**
                * 排序号
                */
                postSort: undefined,
                /**
                * 备注
                */
                remark: '',
                /**
                * 是否启用
                */
                IS_ENABLED: 1,
                /**
                * 是否业务相关
                */
                IS_BUSINESS: 0,
            },   
        }
    });
    const [ModalRender, modalRef] = useModal()
    const stationRef = ref<FormInstance>();
    const userSingleRef = ref<FormInstance>();
    const stationInfo = reactive(props.defaultData.postItem);
    const orgDataTree=reactive(props.defaultData.orgData);
    const leaderTags=ref<any>([]);
    const editDrawerBindValue = reactive({
        defaultSelectData: [],
        runType:'',
        modelType:''
    });
    const openMenuModal = async()=>{
        ModalRender.show({
        title: '选择岗位领导',
        width: '70%',
        // 是否显示右上角确定取消
        defaultExtra: true,
        destroyOnClose: true,
        content: () => {
            return <userSingle  ref={userSingleRef} defaultData={unref(editDrawerBindValue)}></userSingle>;
        },
        // 确定方法执行
        onOk: async (values) => {
            const res = await userSingleRef.value?.handleSubmit();
            if (!res) return;
            leaderTags.value.push(res);
            stationInfo.leader=res.NO;
        },
        });
    };
    //设置公共岗位
    const openPubStationModal = async()=>{
        editDrawerBindValue.modelType="single";
        editDrawerBindValue.defaultSelectData=[];
        if(stationInfo.pubPostId!=""&&stationInfo.pubPostId!=undefined){
            stationInfo.pubPostId.split(",").map((item)=>{
                const pubPostInfo={
                    NAME: '',
                    NO: item,
                    ORG_TYPE: 'station'
                };
                editDrawerBindValue.defaultSelectData.push(pubPostInfo);
            })  
        }
        ModalRender.show({
            title: '选择公共岗位',
            width: '50%',
            // 是否显示右上角确定取消
            defaultExtra: true,
            destroyOnClose: true,
            content: () => {
                return <pubStationModel  ref={pubPostRef} defaultData={unref(editDrawerBindValue)}></pubStationModel>;
            },
            // 确定方法执行
            onOk: async () => {
                const res = await pubPostRef.value?.handleSubmit();
                if (!res) return;
                
                pubStationTags.value=res;
                const postStr=res.map(item=>item.NO.toString());
                const stationIds=postStr.join(',');
                stationInfo.pubPostId=stationIds;
            },
        });
    };
    const loadTagData=async()=>{   
        // const res=await getDeptPosts(stationInfo);
        // if(res.status=="200"){
        //     const orgIdStr=res.result.map(item=>item.DEPT_ID);
        //     stationInfo.orgId=orgIdStr;
        // }  
        if(stationInfo.leader!==''&&stationInfo.leaderName!==''){
            const tag={
                NO:stationInfo.leader,
                NAME:stationInfo.leaderName,
                ORG_TYPE:'user'
            }
            leaderTags.value.push(tag);
        }
        if(stationInfo.pubPostId!==''&&stationInfo.pubPostIdName!==''){
            const tag={
                NO:stationInfo.pubPostId,
                NAME:stationInfo.pubPostIdName,
                ORG_TYPE:'user'
            }
            pubStationTags.value.push(tag);
        }
    };
    loadTagData();
    const handleOrgIdChange=(value)=> {
        // 把选中的值转为数组格式
        stationInfo.orgId = Array.isArray(value) ? value : [value];
        console.log(stationInfo.orgId,"stationInfo.orgId1")
    };
    const handleClose=()=>{
        leaderTags.value=[];
        stationInfo.leader="";
    }
    const handlePostsClose=()=>{
        pubStationTags.value=[];
        stationInfo.pubPostId="";
    }
    const onSubMit = () => {
        return [stationInfo,stationRef]
    };

    defineExpose({
        handleSubmit: onSubMit,
    });
</script>